<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <div class="content_top">
            <el-row>
                <el-col :span="12">
                    <span v-if="communityId === null">新增社区</span>
                    <span v-if="communityId !== null">修改修改</span>
                </el-col>
                <el-col :span="12" style="text-align: right">
                    <el-button icon="el-icon-back" type="default" circle size="mini" @click="back"></el-button>
                </el-col>
            </el-row>
        </div>

        <div class="content">

            <el-row>
                <el-col :span="12" style="padding-left: 20px;">
                    <el-form ref="form" :model="data" :rules="rules" label-width="95px" size="mini" style="width: 50%;">
                        <el-form-item label="社区名称：" prop="name">
                            <el-input v-model="data.name"></el-input>
                        </el-form-item>
                        <el-form-item label="备注：" prop="remark">
                            <el-input type="textarea" v-model="data.remark"></el-input>
                        </el-form-item>
                        <el-form-item style="text-align: center">
                            <el-button type="primary" @click="onSubmit">保存</el-button>
                            <el-button @click="$router.back()">取消</el-button>
                        </el-form-item>
                    </el-form>

                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {areaList} from '@/api/base/area'
    import {addCommunity, modifyCommunity, communityInfo} from '@/api/base/community'

    export default {
        name: 'CommunitySave',
        data() {
            let _this = this
            return {
                loading: false,
                communityId: null,
                data: {
                    name: null,
                    remark: null,
                },
                rules: {
                    name: [
                        {required: true, message: '请输入小区名称', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    remark: [
                        {min: 0, max: 255, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                    ],
                }
            }
        },
        mounted() {
            this.communityId = window.localStorage.getItem("communityId")
            if (this.communityId) {
                this.loadCommunityInfo()
            }
        },
        methods: {
            back () {
                this.$router.back()
            },
            async loadCommunityInfo() {
                this.loading = true
                let res = await communityInfo(this.communityId)
                this.loading = false
                this.data = res.data
            },
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.save()
                    } else {
                        return false;
                    }
                });
            },
            async save() {
                this.loading = true;
                let res = null;
                if (this.communityId === null) {
                    res = await addCommunity(this.data)
                } else {
                    res = await modifyCommunity(this.communityId, this.data)
                }

                this.loading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.$notify({title: '消息', message: '保存成功', type: 'success'});
                if (!this.communityId) {
                    this.$refs.form.resetFields();
                }
            }
        }
    }
</script>

<style scoped>

    .amap {
        width: 100%;
        height: 600px;
        border: 1px solid #E4E7ED;
    }

    .search-box {
        position: absolute;
        top: 15px;
        left: 20px;
    }

    .amap-page-container {
        position: relative;
    }

</style>
